<template>
  <div class="app-container">
    <div class="default-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="网站设置" name="first"><Website /></el-tab-pane>
        <el-tab-pane label="交易设置" name="second"><Transaction /></el-tab-pane>
        <el-tab-pane label="邮箱设置" name="third"><Email /></el-tab-pane>
        <el-tab-pane label="上传设置" name="fourth"><Upload /></el-tab-pane>
        <el-tab-pane label="短信设置(阿里)" name="five"><Messages /></el-tab-pane>
        <el-tab-pane label="实名设置(阿里)" name="six"><Realname /></el-tab-pane>
        <el-tab-pane label="支付宝支付配置" name="seven"><Alipay /></el-tab-pane>
        <el-tab-pane label="微信支付配置" name="eight"><Wechatpay /></el-tab-pane>
        <el-tab-pane label="广告设置" name="nine"><Advertising /></el-tab-pane>
        <el-tab-pane label="淘管家设置" name="ten"><Steward /></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Website from './components/website'
import Email from './components/email'
import Advertising from './components/advertising'
import Alipay from './components/alipay'
import Messages from './components/messages'
import Realname from './components/realname'
import Steward from './components/steward'
import Transaction from './components/transaction'
import Upload from './components/upload'
import Wechatpay from './components/wechatpay'
import { fetchList } from '@/api/article'

// import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Adminrole',
  components: { Website, Email, Advertising, Alipay, Messages, Realname, Steward, Transaction, Upload, Wechatpay },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      status: true,
      activeName: 'first'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>
<style scoped>
  [class^=el-icon-], [class*=" el-icon-"]{
    font-size: 16px;
  }
  .small-padding i{
    margin-right: 12px;
  }
  .small-padding i:last-child{
    margin-right: 0px;
  }
</style>
